<template>
    <el-card :body-style="{ padding: '20px' }" style="width: 80vw; margin: auto; margin-top: 20px;">
        <div>
            <el-button v-for="(button, index) in buttons" :key="index" @click="changeScenario(index)">{{ button
            }}</el-button>
        </div>
    </el-card>
    <Gender v-if="scenario==2"/>
    <Age v-if="scenario==1" />
    <Marital v-if="scenario==3" />
    <Visit  v-if="scenario==4" />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import Age from './components/age.vue';
import Gender from './components/gender.vue';
import Marital from './components/marital.vue';
import Visit from './components/vist.vue'
const scenario = ref(0)
const changeScenario = (value) => {
    scenario.value =value
}


const buttons = [
    '门诊日志',
    '患者年龄分析',
    '患者性别分析',
    '患者婚姻情况分析',
    '就诊类型',
]


</script>

<style scoped></style>